<link rel="import" href="../../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="../../../elements/som-marked-element/som-marked-element.html">

<link rel="import" href="../som-tree-status-styles.html">
<link rel="import" href="../som-tree-status-behavior.html">

<dom-module id="som-tree-status">
  <template>
    <style include="som-tree-status-styles"></style>
    <style>
    #error,
    #treeStatus {
      box-sizing: border-box;
      width: 100%;
      padding: 0.5em 8px;
      margin: 0.5em auto;
      border: 1px solid #ccc;
      color: #222;
      word-wrap: break-word;
    }
    #error {
      background-color: #e98080;
    }
    #treeStatus a {
      color: #222;
    }
    </style>
    <iron-ajax
      id="treeStatusAjax"
      url$="[[_statusUrl]]/current?format=json"
      handle-as="json"
      last-error="{{_statusErrorJson}}"
      last-response="{{_statusJson}}"
      debounce-duration="300"></iron-ajax>
    <div id="error" hidden$="[[!_hasError]]">
      Error fetching tree status from <a href$="[[_statusUrl]]" target="_blank">[[_statusUrl]]</a>
    </div>
    <div id="treeStatus" class$="[[_status]]" hidden$="[[_hideNotice]]">
      Tree status: <som-marked-element markdown="[[_message]]"></som-marked-element>
      by <a href$="mailto:[[_email]]">[[_username]]</a> on [[_time]] (<a href$="[[_statusUrl]]" target="_blank">More</a>)
    </div>
  </template>
  <script src="som-tree-status.js"></script>
</dom-module>
